<template>
  <transition leave-active-class="animate__animated animate__hinge">
    <div class="qf-modal" v-if="visible">
      <div class="marsk">
        <div class="wrap animate__animated animate__zoomInDown">
          <slot name="title">
            <!-- slot默认的结构 -->
            <h2 class="title">警告</h2>
          </slot>
          <slot name="body">
            <div class="body">你确定要购买这辆迈巴赫吗?</div>
          </slot>
          <div class="wrap__button">
            <button @click="$emit('confirm')" class="modal__button--confirm">
              确定
            </button>
            <button @click="$emit('cancel')" class="modal__button--cancel">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
//需要一个属性控制model的显示和隐藏
//需要动态接受title和body，不传值的时候显示默认设置
export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
};
</script>
<style scoped>
/* scoped属性用于模块化css 只作用在当前组件*/
.marsk {
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  width: 350px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
}
.wrap div {
  margin: 15px 0;
}

.modal__button--confirm {
  margin: 0 5px;
  outline: none;
  border: 0;
  width: 150px;
  height: 30px;
  background: linear-gradient(90deg, #1596fb, #002dff);
  border-radius: 0.28571429rem;
  display: block;
  color: #fff;
  cursor: pointer;
}
.modal__button--cancel {
  outline: none;
  border: 0;
  width: 150px;
  height: 30px;
  background: linear-gradient(90deg, #fb7d15, hsl(332, 100%, 50%));
  border-radius: 0.28571429rem;
  display: block;
  color: #fff;
  cursor: pointer;
}
.wrap__button {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
